<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/index.css" rel="stylesheet">
  <title>权益兑换</title>
  </title>
</head>

<body style="background-image: url(./img/bg.jpg);">
  <div id="app">
    <div class="banner"></div>
    <div class="content">
      <h3><span>{{goodsName}}</span></h3>
      <div v-if="input" class="input">
        <div>
          <el-input placeholder="请输入兑换码" v-model="card">
            <template slot="prepend">兑换码</template>
            <el-button slot="append" @click="check">查询</el-button>
            </el-button>
          </el-input>
        </div>
        <div>
          <el-input placeholder="请输入充值账号" v-model="input1" @focus="GetGoods">
            <template slot="prepend">充值账号</template></template>
          </el-input>
        </div>
        <div>
          <el-input placeholder="请确认充值信息" v-model="input2">
            <template slot="prepend">确认账号</template>
          </el-input>
        </div>
        <div>
          <el-button style="width:100%" type="primary" @click="btn">确认兑换</el-button>
        </div>
      </div>
      <div v-else class="input">
        <div>
          <el-input placeholder="请输入兑换码" v-model="card">
            <template slot="prepend">兑换码</template>
            <el-button slot="append" @click="check">查询</el-button>
            </el-button>
          </el-input>
        </div>
        <div>
          <el-input v-model="input1" :disabled="true">
            <template slot="prepend" :disabled="true">充值账号</template></template>
          </el-input>
        </div>
        <div>
          <el-input v-model="input2" :disabled="true">
            <template slot="prepend">充值时间</template>
          </el-input>
        </div>
        <div>
          <el-input v-model="input3" :disabled="true">
            <template slot="prepend">充值状态</template>
          </el-input>
        </div>
      </div>
      <div class="desc">
        <p class="title"> 充值说明：</p>
        <p class="msg"> 1、请认真填写充值账号，核对充值账号类型，切勿填错，如充错自行承担！</p>
        <p class="msg"> 2、充值成功后请在官方APP或者软件中使用，不支持第三方合作应用！</p>
        <p class="msg"> 3、权益以官方描述为准，不得以不是自己想要的、买错来申请退换！</p>
        <p class="msg"> 4、若充值遇到问题，如失败、撤回、余额不足、未知错误，请及时联系客服处理！</p>
        <p class="msg"> 5、天卡24小时，周卡7天，月卡30天，季卡90天，半年180天，年卡365天</p>
      </div>
    </div>
  </div>



  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/vue.js"></script>
  <script src="./js/index.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        goodsName: '',
        input: true,
        card: '',
        input1: '',
        input2: '',
        input3: '',
        type: 1
      },
      created() {
        if (window.location.search.substring(1)) {
          this.card = window.location.search.substring(1);
          this.GetGoods()
        }

      },
      methods: {
        check() {
          this.type = 1
          this.checkCard()
        },
        // 查询
        checkCard() {
          if (this.card) {
            let that = this
            $.ajax({
              type: "GET",
              url: `/api/checkCard?card=${this.card}&type=${this.type}`,
              success: function (res) {
                console.log(that.type);
                if (res.code === 200) {
                  if (res.type === 1) {
                    that.$message.success('兑换码未使用')
                  } else {
                    that.goodsName = res.data.name
                  }
                } else {
                  if (res.type) {
                    that.input = false
                    that.input1 = res.data.input[0]
                    that.input2 = res.data.addtitm
                    that.input3 = res.data.msg
                  } else {
                    that.$message.error(res.msg)
                  }

                }
              }
            })
          } else {
            this.$message.error('兑换码不能为空')
          }
        },
        GetGoods() {
          if (this.card) {
            this.type = 2
            this.checkCard()
          }

        },
        // 提交
        btn() {
          if (this.card) {
            if (this.input1 != this.input2) {
              return this.$message.error('充值账号与确认账号不一致')
            }
            let data = {
              card: this.card,
              input: this.input1,
            }
            this.openFullScreen();
            let that = this
            $.ajax({
              type: "POST",
              data,
              url: `/api/exchangeGoods`,
              success: function (res) {
                if (res.code == 200) {
                  that.$message.success(res.msg)
                  that.closeFullScreen(that.openFullScreen());
                  that.check()
                } else {
                  that.$message.error(res.msg)
                  that.closeFullScreen(that.openFullScreen());
                }
              }
            })

          } else {
            this.$message.error('兑换码不能为空')
          }
        },
        //Loading加载
        openFullScreen() {
          const loading = this.$loading({
            lock: true,
            text: '兑换中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          return loading;
        },
        closeFullScreen(loading) {
          loading.close();
        },
      }
    })
  </script>
</body>

</html>